{# product_list.html的模版 #}
{% block product_list %}
    {% if is_admin %}<button type="button" onclick="window.location.href='{% url 'product_add' %}'" class="btn btn-primary" >新增</button></h1>{% endif %}
    <table class="table table-hover">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>商品描述</th>
            <th>商品价格</th>
            <th>库存数量</th>
            {% if is_admin %}
                <th>操作</th>
            {% endif %}
        </tr>
        </thead>
        <tbody>
        {% for product in data_list %}
            <tr>
                <td>{{ product.name }}</td>
                <td>{{ product.remark }}</td>
                <td>{{ product.price }}</td>
                <td>{{ product.inventory_num }}</td>
                {% if is_admin %}
                    <td>
                        <a href="{% url 'product_update' product.pk %}" class="btn btn-warning btn-sm">编辑</a>
                        <a href="{% url 'product_delete' product.pk %}" class="btn btn-danger btn-sm">删除</a>
                    </td>
                {% endif %}
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
            <!-- 首页按钮 -->
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1&per_page={{ per_page }}" aria-label="First">
                        <span aria-hidden="true">首页</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">首页</span>
                </li>
            {% endif %}

            <!-- 上一页按钮 -->
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}&per_page={{ per_page }}"
                       aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">上一页</span>
                </li>
            {% endif %}

            <!-- 当前页码信息 -->
            <li class="page-item active">
            <span class="page-link">
                第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
            </span>
            </li>

            <!-- 下一页按钮 -->
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}&per_page={{ per_page }}"
                       aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">下一页</span>
                </li>
            {% endif %}

            <!-- 末页按钮 -->
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&per_page={{ per_page }}"
                       aria-label="Last">
                        <span aria-hidden="true">末页</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">末页</span>
                </li>
            {% endif %}
        </ul>

        <!-- 输入页码跳转和选择每页显示数量 -->
        <div class="d-flex justify-content-center mt-3">
            <!-- 输入页码跳转 -->
            <form method="get" action="" class="form-inline mr-3">
                <div class="input-group">
                    <input type="number" name="page" class="form-control" min="1"
                           max="{{ page_obj.paginator.num_pages }}"
                           placeholder="页码" aria-label="页码" required>
                    <input type="hidden" name="per_page" value="{{ per_page }}">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-outline-primary">跳转</button>
                    </div>
                </div>
            </form>

            <!-- 选择每页显示数量 -->
            <form method="get" action="" class="form-inline">
                <div class="input-group">
                    <select name="per_page" class="form-control" aria-label="每页显示数量"
                            onchange="this.form.submit()">
                        <option value="10" {% if per_page == 10 %}selected{% endif %}>10 条/页</option>
                        <option value="20" {% if per_page == 20 %}selected{% endif %}>20 条/页</option>
                        <option value="50" {% if per_page == 50 %}selected{% endif %}>50 条/页</option>
                        <option value="100" {% if per_page == 100 %}selected{% endif %}>100 条/页</option>
                        <option value="200" {% if per_page == 200 %}selected{% endif %}>200 条/页</option>

                        <option value="1"
                                {% if per_page != 10 and per_page != 20 and per_page != 50 and per_page != 100 and per_page != 200 %}selected{% endif %}>
                            自定义
                        </option>
                    </select>
                    {% if per_page != 10 and per_page != 20 and per_page != 50 and per_page != 100 and per_page != 200 %}
                        <input type="number" name="per_page" class="form-control ml-2" min="1"
                               value="{{ per_page }}" placeholder="自定义" aria-label="自定义" required>
                    {% endif %}
                </div>
            </form>
        </div>
    </nav>

{% endblock %}
